<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 画图</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
    // let app = document.getElementById("app");
    // 画笔
    let ctx = app.getContext("2d");
    // 3. 开始新路径
    ctx.beginPath();
    // 4. 将画笔移动到指定点
    ctx.moveTo(10, 10);
    // 5. 画直线
    ctx.lineTo(60, 10);
    ctx.lineTo(60, 60);
    ctx.lineTo(10, 60);
    // 6. 闭合
    ctx.closePath();
    // 7. 描边
    ctx.lineWidth = 5;
    ctx.strokeStyle = "red";
    ctx.stroke();
</script>
</body>
</html>